<template>
  <view class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="inquiryList-page">
		   <!-- <f-navbar  fontColor="#303133"  bgColor="#fff" navbarType="9" :isChoose="2"></f-navbar> -->
			<u-sticky bgColor="#fff">
			    <u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab"></u-tabs>
			  </u-sticky>
			
			<div class="con-list-div" style="padding:32rpx">
				<div class="inquiry-list-item" v-for="(item,index) in list" :key="item.inquiryId" @click="toInfo(item)" :id="index == 0 ?'viewDetailBtn' : ''">
					<div class="inquiry-state yellow" v-if="item.inquiryState == 20">{{item.inquiryStateStr}}</div>
					<div class="inquiry-state grey" v-else-if="item.inquiryState == 30 || item.inquiryState == 40 || item.inquiryState == 50">{{item.inquiryStateStr}}</div>
					<div class="inquiry-state yellow" v-else>{{item.inquiryStateStr}}</div>
					<div class="box-top">
						<div class="inquiry-item-top" v-if="item.inquiryTitle != ''">{{item.inquiryTitle}}</div>
						<div class="inquiry-item-top" v-else></div>
						<div class="item-attr">
							<!-- <div class="attr-blur" v-if="item.sendTypes">{{item.sendTypes}}</div> -->
							<div class="attr-yellow" v-if="item.receiveDate">交货日期：{{item.receiveDate}}</div>
							<div style="display: inline-block;font-size:24rpx;color: #FF6339;margin-left:10rpx;" v-if="item.quotationCount > 0">已报价{{item.quotationCount}}次</div>
						</div>
						<div class="item-cell-div">
							<div class="item-cell">
								<span class="label">询价数量：</span>
								<span class="text">{{item.goodsNum ? item.goodsNum : '--'}}吨</span>
							</div>
							<div class="item-cell" style="margin-top:10rpx;">
								<span class="label">收货地区：</span>
								<span class="text">{{item.receiveArea}}</span>
							</div>
							<div class="item-cell" style="margin-top:10rpx;">
								<span class="label">有效期限：</span>
								<span class="text">{{item.inquiryTime}}至{{item.endTime}}</span>
							</div>
						</div>
					</div>
					<div class="box-bottom">
						<div class="item-bottom">
							<div style="width:98%;margin:0 auto;border-top:1px solid #DEDEDE;position: absolute;top: 0rpx;left:1%"></div>
							<div class="item-bottom-con">
								<div class="bottom-right">
									<div style="width:188rpx;margin-right:10rpx;display: inline-block;" v-if="item.inquiryState == 0 || item.inquiryState == 10 || item.inquiryState == 20">
										<u-button text="取消询价" shape="circle"  size="small" :plain="true" @click.native.stop="showCancel(item)"></u-button>
									</div>
									<div style="width:188rpx;display: inline-block;">
										<u-button text="查看详情" shape="circle"  type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" ></u-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="padding-bottom:40rpx;">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	
    <cancelInquiry ref="cancelInquiry" @refresh="searchList"></cancelInquiry>
	<liu-drag-button :canDocking="false" :bottomPx='170' :rightPx='10'>
		<!-- #ifdef MP -->
		<button style="background: none;" open-type="contact">
			<img src="https://pic.moresu.com/FkBWbqXaE6pGNWH2FPfSZR513GX5" style="width:136rpx;height:134rpx"/>
		</button> 
		<!--#endif -->
		<!-- #ifdef H5 -->
		 <img src="https://pic.moresu.com/FkBWbqXaE6pGNWH2FPfSZR513GX5" style="width:136rpx;height:134rpx" @click="callPhone"/>
		<!--#endif -->
	</liu-drag-button>
	<driver-page ref="driverPage"></driver-page>
  </view>
</template>

<script>

import {getInquiryList,getGuideDataAPI,commonData,pageSeo} from '@/config/api.js'
import cancelInquiry from '@/components/module/cancelInquiry';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import driverPage from '@/components/driver-page/driver-page';
  import {
    mapState,
  } from 'vuex';
const log = require('@/plugins/log.js')
  export default {
    components: {
		cancelInquiry,fNavbar,driverPage

    },
    data() {
      return {
        tabs:[
			{key:'all',name:'全部'},
			{key:'0',name:'审核中'},
			{key:'10',name:'待报价'},
			{key:'20',name:'报价中'},
			{key:'30',name:'已成交'},
			{key:'40',name:'已关闭'},
			{key:'50',name:'已取消'},
		],
		current:0,
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		count:0,
		inquiryState:'',
		steps:[],
		contactMobile:''
	
      }
    },
	computed: {
	  ...mapState(['quotationNum']),
	},
	watch:{
		quotationNum: function (e) {
			let c = JSON.parse(JSON.stringify(this.tabs[3]))
			c.badge= {};
			c.badge.value = e
			this.tabs.splice(3,1,c)
		},
	},
    async onLoad(options) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
    	await this.$onLaunched;	
		this.keyword = '';
		this.categoryId = '';
		this.count = 0;
		this.inquiryState = options.inquiryState ? options.inquiryState : '';
		let i = this.tabs.findIndex((el)=>{
			return el.key == this.inquiryState
		});
		if(i != -1){
			this.current = i
		}else{
			this.current = 0
		}
		
		this.clearData();
		this.getList().then(()=>{
			this.$nextTick(()=>{
					getGuideDataAPI({
						pageUrl:'myInquiry',
						inquiryState:this.inquiryState
					}).then((res)=>{
						this.steps=res
						this.$refs.driverPage.showPop(this.steps)
					}).catch((error)=>{
						console.log(error)
					})
			})
		})
		commonData().then((res)=>{
			this.contactMobile = res.contactMobile
		})
		
    },
	async onShow() {
		await this.$onLaunched;
		let c = JSON.parse(JSON.stringify(this.tabs[3]))
		c.badge= {};
		c.badge.value = this.quotationNum
		this.tabs.splice(3,1,c)
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
	},
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	
    methods: {
		callPhone(){
			uni.makePhoneCall({
				phoneNumber:  this.contactMobile
			});
		},
		showCancel(item){
			this.$refs.cancelInquiry.init(item)
			log.info('单条询价&取消询价')
		},
		changeTab(tab){
			console.log(tab)
			this.inquiryState = tab.key
			this.searchList()
			log.info('我的询价&'+tab.name+'tab按钮')
			
		},
		
		toInfo(item){
			uni.navigateTo({
			  url: '/pages/inquiry/inquiryInfo?inquiryId='+item.inquiryId+'&formPath=inquiry'
			})
			log.info('单条询价&查看按钮')
		},
		searchList(){
			this.clearData();
			this.getList()
		},
		
		//清除数据
		clearData(){
				this.pageNum = 1;
				this.list = [];
				this.status = 'loadmore';
				this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.tab = 'my';
			data.inquiryState = this.inquiryState;
			this.status = 'loading';
		return	getInquiryList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.inquiryList-page{
	background: rgb(242,242,242);
	min-height: 100vh;
	.inquiryList-top{
		padding:32rpx;
		.fifter-div{
			background: #fff;
			border-radius: 18rpx;
			padding:10rpx 0;
			@include flexbox(center,center);
			font-size: $m-font;
			line-height: 48rpx;
			margin-top:20rpx;
			box-shadow: 0px 0px 10rpx rgba(0,17,52,0.09);
			.fifter-item{
				text-align: center;
				width:50%;
				position: relative;
			}
			.fifter-item:first-child{
				color:#FF5E01
			}
			.fifter-item:first-child::after{
				content: ' ';
				position: absolute;
				width:1px;
				height:40rpx;
				background: #DEDEDE;
				right:0;
				top:4rpx;
			}
		}
	}
	.con-list-div{
		margin-bottom:40rpx;
		.inquiry-list-item{
			position: relative;
			margin-bottom:30rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			border-radius: 18rpx;
			.inquiry-state{
				position: absolute;
				right:0;
				top:0;
				z-index: 1;
				width: 162rpx;
				height: 75rpx;
				background: #EFF5FF;
				border-radius: 0px 18rpx 0px 18rpx;
				text-align: center;
				color: #FF5E01;
				font-size:$m-font;
				line-height: 75rpx;
			}
			.inquiry-state.grey{
				color: #929292;
				background: #DEDEDE;
			}
			.inquiry-state.yellow{
				color: #FC9500;
				background: #FFF4E5;
			}
			.box-top{
				padding:32rpx;
				padding-bottom:40rpx;
				position: relative;
				
			}
			.box-bottom{
				padding:0 32rpx 32rpx 32rpx;
				position: relative;
				margin-top:-4rpx;
			}
			.box-top .jiao,.box-bottom .jiao{
			        width: calc(100% - 40rpx);
			        height:20rpx;
			        position:absolute;
			        left: 20rpx;
			    }
			.box-top .jiao{
				background: #fff;
				bottom: -20rpx;
			}
			.box-bottom .jiao{
				background: #fff;
				top: -20rpx;
			}
			.box-top .jiao::before,.box-bottom .jiao::before{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				left:-20rpx;
			}
			.box-top .jiao::after,.box-bottom .jiao::after{
				content:'';
				position:absolute;
				width: 20rpx;
				height: 20rpx;
				right:-20rpx;
			}
			.box-top .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 100%,  transparent 100rpx, #fff 50%);
			}
			.box-top .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 100%,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::before{
				background-image: radial-gradient(circle 20rpx at 0 0,  transparent 100rpx, #fff 50%);
			}
			.box-bottom .jiao::after{
				background-image: radial-gradient(circle 20rpx at 100% 0,  transparent 100px, #fff 50%);
			}
				
			.inquiry-item-top{
				font-size: $m-font;
				line-height: 40rpx;
				color: #1E1E1E;
				margin-top:10rpx;
				position: relative;
				font-weight: bold;
				padding-right:180rpx;
			}
			.inquiry-item-top::after{
				content: ' ';
				position: absolute;
				width: 6rpx;
				height: 36rpx;
				background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
				border-radius: 3rpx;
				overflow: hidden;
				left:-35rpx;
				top:0;
			}
			.item-attr{
				padding:30rpx 0;
				.attr-blur{
					font-size: $s-font;
					line-height: 34rpx;
					color: #FF5E01;
					border-radius: 22rpx;
					background: #EFF5FF;
					padding:4rpx 32rpx;
					display: inline-block;
					margin-right:20rpx;
				}
				.attr-yellow{
					font-size: $s-font;
					line-height: 34rpx;					
					color: #FC9500;
					border-radius: 22rpx;
					background: #FFF4E5;
					padding:4rpx 32rpx;
					display: inline-block;
				}
			}
			.item-cell-div{
				.item-cell{
					font-size:26rpx;
					.label{
						color:#929292
					}
				}
			}
			.item-line{
				height:2rpx;
				background: #DEDEDE;
				width:100%;
			}
			.item-bottom{
				position: relative;
				.item-bottom-con{
					@include flexbox(space-between,center);
					flex-direction:row-reverse;
					padding-top:24rpx;
					.bottom-left{
						position: relative;
						.small-txt{
							color: #1E1E1E;
							font-size:20rpx;
						}
						.big-txt{
							font-size: 48rpx;
							font-weight: bold;
							color: #FF0000;
						}
					}
				}
			}
		}
	
		  
		  
	}
}
 .fixed-btn{
	 width:134rpx;
	 height:134rpx;
	 border-radius: 50%;
	 background: #fff;
	 box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
	 font-size:28rpx;
	 color:#FF5E01;
	 position: fixed;
	 right:10rpx;
	 bottom:200rpx;
	 text-align: center;
	 z-index: 4;
 }
</style>